<template>
  <div class="goods-list flex flex-col">
    <div class="py-4 border-bottom sticky-top header flex justify-between px-4">
      <div class="flex items-center">
        <span>{{ t('商品列表') }} [{{ goods.total }}]</span>
      </div>
    </div>
    <a-card :bordered="false" :body-style="{ padding: '0' }">
      <a-list>
        <a-list-item
          v-for="item in goods.list"
          :key="item"
          :class="{ active: active == item }"
          @click="selectItem(item)"
        >
          {{ item.goodsName }}
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { previewImageSrc } from './bus';
import { listGoods } from '@/api/modules/data/goods';
import { stageConfig } from '../../data/stage';
import { previewTpl } from '@/api/modules/esl/template';

const goods = ref({
  list: [] as any,
  total: 0,
});

const { t } = useI18n();
const active = ref(-1);
onMounted(async () => {
  const { data } = await listGoods({
    pageSize: 20,
    pageNum: 1,
    total: 0,
  });
  goods.value.list = data.rows;
  goods.value.total = data.total;
});

/**
 * 注释: 选择商品触发
 *
 * */
const selectItem = async (item: any) => {
  active.value = item;
  const config = { ...stageConfig.value };
  config.goodsId = item.goodsId;
  const { data } = await previewTpl({
    stage: config,
    templateList: [],
  });
  previewImageSrc.value = data.data;
};
</script>

<style lang="scss" scoped>
.goods-list {
  width: 200px;
  height: 100%;
  background-color: white;
  overflow-y: auto;
  .active {
    background-color: var(--primary);
    color: white;
  }
}
</style>
